<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <questions-input
          :counts="counts"
          @clear="clearFrom"
          @searchValue="searchInfo"
        ></questions-input>
        <el-row>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane :label="$t('table.All')" name="first"></el-tab-pane>
            <el-tab-pane :label="$t('table.reviewed')" name="0"></el-tab-pane>
            <el-tab-pane :label="$t('table.checked')" name="1"></el-tab-pane>
            <el-tab-pane :label="$t('table.rejected')" name="2"></el-tab-pane>
          </el-tabs>
        </el-row>
        <el-row
          ><el-alert :title="`数据一共${counts}条`" type="info" show-icon>
          </el-alert
        ></el-row>
        <el-table
          :data="tableData"
          style="width: 100%; margin-top: 10px"
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column
            prop="number"
            :label="$t('table.Testquestionnumber')"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="subject"
            :label="$t('table.Subject')"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="catalog"
            :label="$t('table.Directorys')"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="questionType"
            :label="$t('table.questionType')"
            width="120"
            :formatter="formatterQuestionType"
          >
          </el-table-column>
          <el-table-column
            prop="question"
            :label="$t('table.stem')"
            width="200"
          >
            <template #default="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            :label="$t('table.EntryTime')"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="difficulty"
            :formatter="formatterDifficulty"
            :label="$t('table.difficulty')"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="creator"
            :label="$t('table.EnteredBy')"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="chkState"
            :formatter="formatterchkState"
            :label="$t('table.auditStatus')"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="chkRemarks"
            :label="$t('table.auditOpinion')"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="chkUser"
            :label="$t('table.auditor')"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="publishState"
            :formatter="formatterPublishType"
            :label="$t('table.publishStatus')"
            width="120"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('table.operation')"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClickperview(scope.row)"
                type="text"
                size="small"
                >{{ $t("table.preview") }}</el-button
              >
              <!-- @click="check" -->
              <el-button
                type="text"
                size="small"
                @click="auditInfo(scope.row)"
                :disabled="scope.row.chkState === 0 ? false : true"
                >{{ $t("table.audit") }}</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="editNew(scope.row.id)"
                :disabled="scope.row.publishState === 1"
                >{{ $t("table.Edit") }}</el-button
              >
              <el-button
                type="text"
                v-if="scope.row.publishState === 0"
                size="small"
                @click="putaway(scope.row.id)"
                >{{ $t("table.putaway") }}</el-button
              >
              <el-button
                type="text"
                v-else
                size="small"
                @click="soltOut(scope.row.id)"
                >{{ $t("table.SoldOut") }}</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.publishState === 1"
                @click="delList(scope.row.id)"
                >{{ $t("table.remove") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination" v-show="counts">
          <div class="pages">
            <el-pagination
              background
              @size-change="hSizeChange"
              @current-change="hCurrentChange"
              :current-page="form.page"
              :total="counts"
              :page-size="form.pagesize"
              :page-sizes="[5, 10, 20, 30, 50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
      </el-card>
      <previewDialog
        :ShowDialog.sync="ShowDialog"
        :tableDate="previewVal"
      ></previewDialog>
      <el-dialog
        width="25%"
        title="题目审核"
        :visible.sync="auditDialog"
        :close-on-click-modal="false"
      >
        <el-radio v-model="audit" label="1">通过</el-radio>
        <el-radio v-model="audit" label="2">拒绝</el-radio>
        <div class="audit">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审核意见"
            v-model="auditTextarea"
          >
          </el-input>
        </div>
        <div class="button">
          <el-button @click="auditCancel">取消</el-button>
          <el-button type="primary" @click="auditComfirm">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import questionsInput from '../components/questions-input.vue'
import {
  choice,
  choicePublish,
  choiceCheck,
  detail as questionList,
  remove
} from '@/api/hmmm/questions.js'
import dayjs from 'dayjs'
// 导入枚举值
import { difficulty, questionType } from '@/api/hmmm/constants'
import previewDialog from './companys/questions-previews.vue'
export default {
  components: {
    questionsInput,
    previewDialog
  },
  data () {
    return {
      form: {
        page: 1,
        pagesize: 5,
        chkState: null
      },
      // 审核的数据
      auditValue: {
        id: '',
        chkState: '',
        chkRemarks: ''
      },
      counts: 0, // 消息总数
      tableData: [], // table表格数据
      activeName: 'first', // panel
      // soltOutBoolean: false,//上架下架
      ShowDialog: false, // dialog 弹窗
      previewVal: {}, // 当前行的数据
      auditDialog: false, // 审核的dialog
      audit: '1', // 是审核状态
      auditTextarea: '', // 文本域数据
      auditButton: false, // 审核按钮禁用状态
      loading: true // loading
    }
  },
  async created () {
    this.getList()
  },
  methods: {
    // 表头样式
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      return 'background-color: #fafafa;border-bottom:2px solid #E8E8E8;'
    },
    async getList () {
      this.loading = true
      const { data } = await choice(this.form)
      this.counts = data.counts
      this.tableData = data.items
      this.tableData.filter((item) => {
        item.addDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
      })
      this.loading = false
    },
    // 一页多少条数据
    hSizeChange (val) {
      this.form.pagesize = val
      this.getList()
    },
    // 当前页
    hCurrentChange (val) {
      this.form.page = val
      this.getList()
    },
    // 处理难度的枚举值
    formatterDifficulty (row, column, cellValue, index) {
      // 通过find筛选
      const result = difficulty.find((item) => item.value === cellValue)
      return result ? result.label : '未知'
    },
    // 处理题型枚举值
    formatterQuestionType (row, column, cellValue, index) {
      const res = questionType.find((item) => item.value === cellValue)
      return res ? res.label : '未知'
    },
    // 处理发布状态
    formatterPublishType (row, column, cellValue, index) {
      // const res = publishType.find(item => (item.value - 1) === Number(cellValue))
      // return res ? res.label : '未知'
      const chkstate = row.chkState
      if (chkstate === 0 || chkstate === 2) {
        return '待发布'
      } else if (chkstate === 1 && cellValue === 0) {
        return '已下架'
      } else if (chkstate === 1 && cellValue === 1) {
        return '已发布'
      }
    },
    // 审核状态
    formatterchkState (row, column, cellValue, index) {
      if (cellValue === 0) {
        return '待审核'
      } else if (cellValue === 1) {
        return '已审核'
      } else if (cellValue === 2) {
        return '已拒绝'
      }
    },
    // 编辑试题
    editNew (id) {
      this.$router.push(`/questions/new?id=${id}&routerJump=2`)
    },
    // ********标签页
    handleClick () {
      this.form.page = 1
      this.form.chkState = Number(this.activeName)
      if (this.activeName === 'first') {
        this.form.chkState = null
      }
      this.getList()
    },
    // 下架
    soltOut (id) {
      this.$confirm('您确认下架这道题目吗?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await choicePublish({ id: id, publishState: 0 })
          this.getList()
        })
        .catch(() => {})
    },
    // 上架
    putaway (id) {
      // this.$set(‘表单名称’，‘要修改的字段（必须是本行的），‘要改变成的值’’)
      this.$confirm('您确认上架这道题目吗?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await choicePublish({ id: id, publishState: 1 })
          this.getList()
        })
        .catch(() => {})
    },
    // ***************预览
    async handleClickperview (val) {
      this.ShowDialog = true
      const { data } = await questionList({ id: val.id })
      console.log(data)
      this.previewVal = data
    },
    // ************审核
    auditInfo (data) {
      this.auditDialog = true
      this.auditValue.id = data.id
    },
    // 点击确认
    auditComfirm () {
      this.auditValue.chkState = Number(this.audit)
      this.auditValue.chkRemarks = this.auditTextarea
      if (this.auditValue.chkRemarks === '') {
        this.$message.warning('请输入审核意见')
        return
      }
      this.auditChoice()
    },
    // 点击取消
    auditCancel () {
      this.auditDialog = false
    },
    // 审核数据Api
    async auditChoice () {
      const res = await choiceCheck(this.auditValue)
      console.log(res)
      this.getList()
      this.$message.success('操作成功')
      this.auditDialog = false
    },
    //* *************** */ 搜索功能
    searchInfo (data) {
      this.form = { ...data, page: 1, pagesize: 5 }
      this.getList()
    },
    clearFrom () {
      this.getList({ page: 1, pagesize: 5 })
    },
    // ********删除
    delList (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          if (this.form.page > 1 && this.tableData.length === 1) {
            this.form.page--
          }
          await remove({ id: id })
          this.$message.success('删除成功')
          this.getList()
        })
        .catch(() => {})
    }
  }
}
</script>
<style scoped lang="scss">
.pagination {
  float: right;
  margin: 30px 0;
}
.audit {
  margin-top: 30px;
}
.button {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
}
// .operation{
//   width: 200px !important;
//   display: flex !important;
//   justify-content: space-around !important;
//   align-content: center !important;
// }
</style>
